<!-- 单柱状图 -->
<template>
  <div :style="{ width: width, height: height }">
    <div :id="id" :ref="id" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "SingleBar",
  props: {
    id: {
      required: true,
      type: String,
      default: "single-bar",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    color: {
      type: String,
      default: "rgba(39, 129, 206, 1)",
    },
    chartData: {
      type: Object,
      default() {
        return {
          // xAxisData: [
          //   "20220101",
          //   "20220101",
          //   "20220101",
          //   "20220101",
          //   "20220101",
          //   "20220101",
          //   "20220101",
          // ],
          // data: [
          //   {
          //     name: "信用评级",
          //     data: [120, 132, 101, 134, 90, 230, 210],
          //   },
          // ],
        };
      },
    },
    ratingInfoList: {
      type: Array,
      default: [
        // "AAA",
        // "AAA-",
        // "AA+",
        // "AA",
        // "AA-",
        // "A+",
        // "A",
        // "A-",
        // "BBB+",
        // "BBB",
        // "BBB-",
        // "BB+",
        // "BB",
        // "BB-",
        // "B+",
        // "B",
        // "B-",
        // "CCC+",
        // "CCC",
        // "CCC-",
        // "CC+",
        // "CC",
        // "CC-",
        // "C+",
        // "C",
        // "C-",
        // "D",
      ],
    },
  },
  watch: {
    chartData: {
      handler: function (newValue, oldValue) {
        this.getChart();
        if (this.chart) {
          window.addEventListener("resize", this.chart.resize);
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.getChart();
    if (this.chart) {
      window.addEventListener("resize", this.chart.resize);
    }
  },
  beforeDestroy() {
    if (!this.chart) return;
    this.chart.dispose();
    this.chart = null;
  },
  created() {},
  methods: {
    getChart() {
      const legendData = [];
      const seriesData = [];
      this.chartData.data.forEach((element, index) => {
        legendData.push(element.name);
        let sData = [];
        element.data.forEach((item) => {
          sData.push(this.ratingInfoList.indexOf(item));
        });
        seriesData.push({
          name: element.name,
          type: "line",
          step: "start",
          tooltip: {
            valueFormatter: function (value) {
              return value;
            },
          },
          itemStyle: {
            normal: {
              color: this.color || "rgba(39, 129, 206, 1)",
            },
          },
          data: sData,
        });
      });
      this.chart = echarts.init(this.$refs[this.id]);
      const _this = this;
      var option = {
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            fontSize: 10,
          },
          extraCssText:
            "margin:4px 6px;background: rgba(18,56,107,0.45);border-radius: 2px;border: 1px solid #1B74B9;",
          formatter: function (params) {
            let str = "";
            str += `<div class="><div style="">${params[0].name}<div/>`;
            params.forEach((element, index) => {
              let color = "";
              if (element.color.colorStops) {
                color = element.color.colorStops[2].color;
              } else {
                color = element.color;
              }
              const marker = `<span style="display:inline-block;margin-right:5px;width:8px;height:8px;background:${color}"></span>`;
              str += `<div>`;
              str += `${marker}
              <span style="display:inline-block;margin-right:5px;min-width:80px;color:#E3F1FD;font-size:12px;">${
                element.seriesName
              }</span>
              <span style="display:inline-block;margin-right:5px;min-width:20px;color:#E3F1FD;">${
                _this.ratingInfoList[element.value]
              }</span>`;
              str += "</div>";
            });
            str += "</div>";
            return str;
          },
        },
        backgroundColor: "rgb(255,255,255,0)",
        // legend: {
        //   show: true,
        //   icon: "rect",
        //   itemWidth: 8,
        //   itemHeight: 8,
        //   textStyle: {
        //     fontSize: 10,
        //     color: "#E3F1FD",
        //   },
        //   data: legendData,
        //   right: "8%",
        //   top: 6,
        // },
        grid: [
          {
            left: "5%",
            right: "10%",
            top: "20%",
            bottom: "10%",
            containLabel: true,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: this.chartData.xAxisData,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              align: "left",
              fontSize: 12,
              fontWeight: 400,
              color: "#E3F1FD",
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            nameTextStyle: {
              color: "#9BAEC3",
              fontSize: 12,
              padding: 0,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#9BAEC3",
              margin: 0,
              formatter: (value) => {
                return this.ratingInfoList[value];
              },
            },
            splitLine: {
              lineStyle: {
                color: "#60686F",
                type: "dashed",
              },
            },
          },
        ],
        series: seriesData,
      };
      option && this.chart.setOption(option, true);
    },
  },
};
</script>

<style lang="scss" scoped></style>
